<template>
	<!-- 分类页 -->
	<view class="container">
		<toSafe></toSafe>
		<!-- 导航栏 -->
		<uni-nav-bar 
			id="navbar"
			@clickLeft="HandleLeft" 
			color="#111" 
			:fixed="true" 
			leftIcon="left" 
			:border="false" 
			backgroundColor="#fff"
			:title="Title"></uni-nav-bar>
	
		<!-- 书籍列表 -->
		<scroll-view 
			class="ScrollView"
			:style="{'height': scrollHeight + 'px'}"
			:scroll-y="true" 
			upper-threshold="100"
			@scrolltolower="loadMore">
			<!-- 书籍选项 -->
			<view class="BooksListItemBox" v-for="(item,index) in BooksList" :key="index">
				<BooksSynopsis
					:Id="item.id" 
					:BooksName="item.title" 
					:Synopsis="item.subTitle" 
					:CoverUrl="baseURL+item.imgSrc"
					:Wordage="item.words || 0"
					:Price="item.price"
					:IsOwn="item.isOwn"></BooksSynopsis>
			</view>
		</scroll-view>
	
	</view>
</template>

<script setup lang="ts">
	// 书籍简介
	import BooksSynopsis from '../../compoents/BooksSynopsis/BooksSynopsis.vue';
	import { ref, reactive, onMounted } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { GetNovelClass } from '@/api/Novel.js'
	import toSafe from '@/compoents/top-safe.vue'
	import {getElementHeight} from '@/utils/common.js'
	// 导航栏标题
	const Title = ref("")
	const baseURL = ref("http://www.filwc.com/prod-api");
	// 分类id
	const Id = ref()
	// 分类书籍列表
	const BooksList = ref([])
	const HandleLeft = () => {
		let delta = 2;
		if(categoryId.value !== '') {
			delta = 1;
		}
		uni.navigateBack({
			delta
		});
	}
	let keyword = ref<string>(""),
		categoryId = ref<string>("");
	let pageInfo = reactive<{pageNum: number, pageSize: number, total: number}>({
		pageNum: 1,
		pageSize: 10,
		total: 0
	})
	onLoad((e)=> {
		if(e.keyword) {
			keyword.value = e.keyword;
		}
		if(e.categoryId) {
			categoryId.value = e.categoryId;
		}
		GetBooksList();
	})
	const loadMore = () => {
		pageInfo.pageNum++;
		if (pageInfo.pageNum <= Math.ceil(pageInfo.total / pageInfo.pageSize)) {
		    GetBooksList();
		}
	}
	
	const GetBooksList = () => {
		GetNovelClass({
			title: keyword.value, 
			pageNum: pageInfo.pageNum,
			pageSize: pageInfo.pageSize, 
			cateId: categoryId.value
		}).then((res:any) => {
			BooksList.value.push(...res.rows)
			pageInfo.total = res.total;
		}).catch(err => {
			console.log("分类列表错误",err)
		})
	}
	let scrollHeight = ref(0);
	onMounted(() => {
		let safeHeight = 0, systemHieght = 0;
		const systemInfo = uni.getSystemInfoSync();
		safeHeight = systemInfo.safeAreaInsets.top;
		systemHieght = systemInfo.safeArea.height;
		getViewHeight(systemHieght - safeHeight);
	})
	const getViewHeight = (systemHieght) => {
		getElementHeight(this, '#navbar')
		.then((height) => {
			scrollHeight.value = systemHieght - (height + 10);
		})
	};
	
</script>

<style lang="less" scoped>
	.container{
		width: 100%;
		height: 100%;
		background: #F5F5F5;
		// spadding: 0 28rpx;
		box-sizing: border-box;
	}
	.BooksListItemBox{
		padding-top: 20rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
